<template>
	<view class="content">
		<view class="top_bar" style="background: rgba(244,244,244,0.96);; border-bottom:1rpx solid #b5b5b5;" >
			<view @click="backLogin" class="top_bar_left">
				<image src="../../static/fh.png" mode=""></image>
			</view>
			<view class="top_bar_center">
				<text>详情</text>
			</view>
			<view class="top_bar_right">
				<image src="../../static/three.png" mode=""></image>
			</view>
		</view>
		<view class="main">
			<view class="low_head">
				<view class="title">头像</view>
				<view class="cont">
					<image-cropper :src="tempFilePath" @confirm="confirm"  @cancel="cancel"></image-cropper>
					<image mode="heightFix" :src="cropFilePath" @tap="upload"></image>
					</view>
				<view class="more"><image src="../../static/goright.png" mode="heightFix"></image></view>
			</view>
			<view class="low_main" @click="addfriendAnimat('签名',userinfo.text)">
				<view class="title">签名</view>
				<view class="cont"><text>{{ userinfo.text }}</text></view>
				<view class="more"><image src="../../static/goright.png" mode="heightFix"></image></view>
			</view>
			<view class="low_main" style="border-bottom: #b9b9b9 1rpx solid;">
				<view class="title">注册</view>
				<view class="cont"><text>{{ userinfo.register }}</text></view>
				<view class="more"><image src="../../static/goright.png" mode="heightFix"></image></view>
			</view>
			<view class="low_main" @click="addfriendAnimat('昵称',userinfo.username)" >
				<view class="title">昵称</view>
				<view class="cont"><text>{{ userinfo.username }}</text></view>
				<view class="more"><image src="../../static/goright.png" mode="heightFix"></image></view>
			</view>
			<view class="low_main">
				<view class="title">生日</view>
				<view class="cont"><text>
				   <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{ userinfo.birthday }}</view>
					</picker>
				</text></view>
				<view class="more"><image src="../../static/goright.png" mode="heightFix"></image></view>
			</view>
			<view class="low_main">
				<view class="title">性别</view>
				<view class="cont"><text>
					  <picker @change="bindPickerChange" :value="gender" :range="array">
						<view class="uni-input">{{array[userinfo.gender]}}</view>
						</picker>
				</text></view>
				<view class="more"><image src="../../static/goright.png" mode="heightFix"></image></view>
			</view>
			<view class="low_main" @click="addfriendAnimat('电话',userinfo.phone)" >
				<view class="title">电话</view>
				<view class="cont"><text>{{ userinfo.phone }}</text></view>
				<view class="more"><image src="../../static/goright.png" mode="heightFix"></image></view>
			</view>
			<view class="low_main" @click="addfriendAnimat('邮箱',userinfo.email)" >
				<view class="title">邮箱</view>
				<view class="cont"><text>{{ userinfo.email }}</text></view>
				<view class="more"><image src="../../static/goright.png" mode="heightFix"></image></view>
			</view>
			<view class="low_main">
				<view class="title">密码</view>
				<view class="cont"><text>密码设置</text></view>
				<view class="more"><image src="../../static/goright.png" mode="heightFix"></image></view>
			</view>
			<view class="logout" @click="logout">
				<text>退出登录</text>
			</view>
			<view class="nodify" :animation='animationData' >
				<view class="head">
					<view class="close"@click="addfriendAnimat" >取消</view>
					<view class="title">{{ nodifyTitel }}</view>
					<view class="defime" @click="handleDefime(nodifyTitel, showData)" >确定</view>
				</view>
				<view class="main">
					<input type="text" v-model="showData" placeholder="" />
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import ImageCropper from "../../components/ling-imgcropper/ling-imgcropper.vue";
	import datas from "../../commons/js/data.js"
	import dateformat from '../../commons/js/dateformat.js'
	import request,{BasicUrl} from '../../utails/request.js'
	
	export default {
		data() {
			const currentDate = this.getDate({
						format: true
					})
			return {
				// 
				userinfo:{},
				cropFilePath:'',
				nodifyTitel:'', // 弹出的标题
				array: ['未知','男','女'],
				gender:0,
				date: currentDate,
				time: '12:01',
				// 图片
				tempFilePath: "",
				changeData:'' ,//  修改的标签
				types:'', // 修改的类型
				showData:'', // 修改前的内容
				isNodify:false ,// 点击修改
				widHeight:'', // 页面高
				animationData:{} // 动画
			}
		},
		onLoad() {
			
			this.getUserData()
			
		},
		
		onReady() {
			this.getElementStyle()
			console.log(this.widHeighht)
		},
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
			// 引入裁剪工具
		components: {
		    ImageCropper,
		  },
		onHide() {
			// 页面关闭 更新本地数据
			this.updateLocalData()
		},
		
		methods: {
			
			async getUserData(){
				// userid 
				let user = uni.getStorageSync('userinfo')
				// 校验登录
				
				// 获取用户信息
				let res = await request.request2({url:'/userdetails/',data:{userid:user.id}})
				console.log(res)
				this.userinfo = res 
				// 数据处理
				this.cropFilePath = this.userinfo.userimg
				if(this.userinfo.birthday){
					this.userinfo.birthday = dateformat.format2(this.userinfo.birthday)
				}else{
					this.userinfo.birthday = '请输入生日'
				}
				this.userinfo.register = dateformat.format2(this.userinfo.register)
				this.gender = this.userinfo.gender
			},
			
			
			// 修改数据时的动画
			addfriendAnimat(type,data){
				this.nodifyTitel = type
				this.showData = data
				this.isNodify = !this.isNodify
				// 实现拉长和回收有不同的速度
				var animation = uni.createAnimation({
				      duration: 500,
				        timingFunction: 'ease',
				    })
			
				if(this.isNodify){
					animation.top(0).step()
				}else{
					animation.top(1006).step()
				
				}
				this.animationData = animation.export()

			},
			//  点击确定
			async handleDefime(types, datas){
				// 处理
				
				
				// 向后端发送数据
				let data = {
					userid:this.userinfo.id,
					types:types,
					datas:datas
				}
				const res = await request.request2({url:'/userdetails/',data,method:'POST'})
				console.log(res)
				if(res.code==200){
					this.addfriendAnimat(types, data)
					uni.showToast({
						title:'上传成功'
					})
					this.getUserData()
				}else{
					uni.showToast({
						title:'上传失败',
						icon:'none'
					})
					this.addfriendAnimat(types, data)
				}
				
			},
			// 性别 生日 修改数据
			async handleSubData(types,datas){
				let data = {
					userid:this.userinfo.id,
					types:types,
					datas:datas
				}
				const res = await request.request2({url:'/userdetails/',data,method:'POST'})
				if(res.code==200){
					uni.showToast({
						title:'上传成功'
					})
					this.getUserData()
				}else{
					uni.showToast({
						title:'上传失败',
						icon:'none'
					})
				}
			},
			// 更新本地数据
			updateLocalData(){
				
			},
			// 退出登录
			logout(){
				uni.showModal({
					title:'确认退出登录吗',
					success:(res)=>{
						if(res.confirm){
							// 用户确定退出
							uni.removeStorageSync('userinfo')
							uni.redirectTo({
								url:'../login/login',
							})
						}
					}
				})
			},
			
			// 返回上一页
			backLogin(){
				uni.navigateBack({
					delta:1
				})
			},
			
			// 获取页面高度
			getElementStyle(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.nodify').boundingClientRect(data => {
				  this.widHeighht = data.height 
				}).exec();
			},
			
			// 获取性别
			 bindPickerChange: function(e) {
				this.userinfo.gender = e.target.value
				this.handleSubData('性别',this.userinfo.gender)
			},
			// 获取日期 时间
		    bindDateChange: function(e) {
				this.userinfo.birthday = dateformat.format2(e.target.value)
				this.handleSubData('生日',e.target.value)
			},
			bindTimeChange: function(e) {
				this.time = e.target.value
			},
			 getDate(type) {
					const date = new Date();
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();
		
					if (type === 'start') {
						year = year - 60;
					} else if (type === 'end') {
						year = year + 2;
					}
					month = month > 9 ? month : '0' + month;
					day = day > 9 ? day : '0' + day;
					return `${year}-${month}-${day}`;
			    },
					
					
		// 头像裁剪上传
		  upload() {
			  uni.chooseImage({
				count: 1, //默认9
				sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ["album",'camera'], //从相册选择
				success: (res) => {
				  this.tempFilePath = res.tempFilePaths.shift();
				},
			  });
			},
			confirm(e) {
			  this.tempFilePath = "";
			  this.cropFilePath = e.detail.tempFilePath;
			  // console.log(this.cropFilePath)
			
			  uni.uploadFile({
				url: BasicUrl + "/userdetails/push_img/",
				filePath: this.cropFilePath,
				name: "file",
				fileType: "image",
				formData:{
					userid:this.userinfo.id
					}, // 传递参数
				success: (uploadFileRes) => {
				  let backstr = uploadFileRes.data;
				  backstr = JSON.parse(backstr);
				  if(backstr.code=='200'){
					  uni.showToast({
					  	title:'上传成功'
					  })
				  }else{
					 //  uni.showToast({
					 //  	title:'上传失败',
						// icon:'none'
					 //  })
				  }
				},
		
				fail(e) {
				  console.log("this is errormes " + e.message);
				},
			  });
		
			},
			
			cancel() {
			  console.log("canceled");
			  this.tempFilePath = "";
			}
		},

	}
</script>

<style>
	@import '../../commons/css/myss.scss';
	
	
	.main{
		/* height: 100vh; */
		width: 100%;
		margin-top: 100rpx;
		/* padding: 0 30rpx; */
		display: flex;
		flex-direction: column;
	}
	.main .low_head{
		flex: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.main .low_head .title{
		width: 112rpx;
		height: 112rpx;
		line-height: 112rpx;
		font-size: 36rpx;
		text-align: center;
		padding-left: 15rpx;
	}
	.main .low_head .cont{
		height: 112rpx;
		width: calc( 100% - 224rpx );
		padding: 6rpx 0;
	}
	.main .low_head .cont image{
		margin-left: 30rpx;
		height: 100rpx;
	}
	.main .low_head .more{
		height: 52rpx;
		width: 52rpx;
		padding: 30rpx;
	}
	.main .low_head .more image{
		height: 52rpx;
	}
	
	.main .low_main{
		flex: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.main .low_main .title{
		width: 112rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 36rpx;
		text-align: center;
		padding:0 15rpx;
		font-weight: 500;
	}
	/* cont */
	.main .low_main .cont{
		height: 90rpx;
		width: calc( 100% - 224rpx );
		padding: 6rpx 0;
	}
	.main .low_main .cont text{
		width: 100%;
		height: 100%;
		/* margin-left: 30rpx; */
		line-height: 90rpx;
	}
	
	.main .low_main .more{
		height: 44rpx;
		width: 44rpx;
		padding: 23rpx 34rpx;
	}
	.main .low_main .more image{
		height: 44rpx;
	}
	
	.main .logout{
		position: absolute;
		bottom: 100rpx;
		height: 90rpx;
		width: 100%;
		text-align: center;
	}
	.main .logout text{
		width: 100%;
		height: 100%;
		color:#dd524d;
		font-size: 40rpx;
		line-height: 90rpx;
	}
	
	/* changeData */
	.nodify{
		position: fixed;
		top: 1006px;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		z-index: 1000;
	}
	
	.nodify .head{
		height: 88rpx;
		width: 100%;
	}
	.nodify .head .close{
		float: left;
		height: 88rpx;
		width: 120rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
	}
	.nodify .head .title{
		float: left;
		height: 100%;
		width: calc(100% - 240rpx);
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: #555555;
	}
	
	.nodify .head .defime{
		float: right;
		height: 88rpx;
		width: 120rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: #007AFF;
	}
	
	.nodify .main{
		width:460rpx;
		background-color: #f1f1f0;
		margin: 40rpx auto;
		padding: 0 50rpx;
		height: 400rpx;
		font-size: 32rpx;
		line-height: 64rpx;
		border-radius: 36rpx;
		text-align: center;
	}
	.nodify .main input{
		width: 460rpx;
		height: 400rpx;
		background-color: #f1f1f0;
		font-size:36rpx;
	}
</style>
